@import "../base"

.shop_index
  display: flex
  flex-direction: column
  align-items: center
  justify-content: center
  color: $font_color_title
  font-size: $font_size
  background: linear-gradient(90deg, #264146, #304767)

  input
    display: none

  .index_header
    width: 100%

    video
      display: block
      width: 100%
      object-fit: contain
      overflow-clip-margin: content-box
      overflow: clip


  .shop_content
    width: 100%
    display: flex
    flex-direction: row
    flex-wrap: nowrap
    justify-content: space-between

    .game_type_filter
      width: 20%
      padding-left: 5%
      margin-right: 1%

      .game_tags_header
        color: #74aaf5
        font-size: $font_size * 2

      label
        font-size: $font_size

      li
        color: #72c4e3
        margin: 2px

        &:hover
          background: rgba(118, 159, 241, 0.46)

        label
          display: block

      .isChecked
        background: #674e86

    .index_card_show
      width: 80%
      padding-right: 10%
      display: flex
      flex-direction: column
      align-items: center
      background: #2e3c46

      .gameBigCard
        margin-top: 20px
        width: 1050px

        .bottom_index
          position: absolute
          display: inline-block
          margin: 12px 0 0 0
          width: 15px
          height: 9px
          border-radius: 2px
          transition: background-color 0.2s
          background-color: hsla(202, 60%, 100%, 0.2)
          cursor: pointer

      .gameIndexCard
        margin-top: 40px
        background: #435e6c
